<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程信息</title>
    <style type="text/css">
        #addForm{
            position: absolute;
            left:0;
            right: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(100,100,120,0.5);
        }
        #addForm #addMain{
           /* position: absolute;*/
            left: 0px;
            top: 200px;
        }
    </style>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            var pageNo=1;
            var total=1;
            //var subjectname="";
            function doLoad(){
                $.get("subjectServlet",{pageNo:pageNo,subjectname:$("#subjectname").val()},function (p) {
                    total=p.totalPages;
                    var tab=$("#query-table");
                    tab.find("tr:gt(0)").remove();
                    $.each(p.datas,function (i,d) {
                        tab.append("<tr><td>"+d.id+"</td><td>"+d.subjectname+"</td><td>"+d.classhour+"</td><td>"+d.gradeid+"</td></tr>");
                    });
                });
            }
            doLoad();
            $("#page #prev").click(function () {
                pageNo--;
                doLoad();
                return false;
            });
            $("#page #next").click(function () {
                pageNo++;
                doLoad();
                return false;
            });
            $("#search").click(function () {
                pageNo=1;
                doLoad();
                return false;
            });
            $("#toUpdate").click(function () {
                $("#addForm").show();
            });
        });
    </script>
</head>
<body>
<form >
    <input type="search" placeholder="课程名" id="subjectname">
    <input type="submit" value="搜索" id="search"/>

    <input type="button" value="增加新课" id="toUpdate"/>
</form>
<table border="1" id="query-table" align="center" cellpadding="0" cellspacing="0">
    <tr bgcolor="#a9a9a9">
        <th>id</th>
        <th>subjectname</th>
        <th>学时</th>
        <th>年级号</th>

    </tr>

</table>
<p align="center" id="page">
    <a href="#" id="first">首页</a>

    <a href="#" id="prev">上一页</a>

    <input type="number" min="1" value="" style="width: 60px">
    <input type="button" value="GO" id="go" style="width: 50px"/>


    <a href="#" id="next">下一页</a>

    <a href="#" id="last"> 尾页</a>
</p>

<div id="addForm" hidden>
    <div id="addMain">
        <form>
            <fieldset>
                名称:<input type="text" name="subjectname" required/>
            </fieldset>
            <fieldset>
                学时:<input type="number" min="1" name="classhour" required/>
            </fieldset>
            <fieldset>
                年级:<select name="gradeid" id="gradeid"></select>
            </fieldset>
        </form>
    </div>
</div>
</body>
</html>